<!--物流进度-->
<style lang="less" scoped>
  .contain {
    padding-bottom: .5rem;
  }
  .NodeName {
    color: #999;
  }
  .pro-map-wrap {
    background: #fff;
  }
  .ExcuteState {
    font-size: 14px;
    line-height: 32px;
    color: #666;
  }
  .ExcuteDate {
    color: #888;
    line-height: 12px;
  }
  .prog-step-wrap {
    background: transparent;
    padding: 0.2rem;
    &.nopad {
      padding:0;
    }
  }
  .prog-step {
    padding-left: 15px;
  }
  .prog-step-dl:after {
    width: 14px;
    height: 14px;
    left: -24px;
    top: 13px;
  }
  .PoDate {
    color: #999;
  }
  .prog-wrap {
    padding: 0;
    div {
      &:first-of-type {
        padding-top: 5px;
      }
      &:last-of-type {
        padding-bottom: 5px;
      }
    }
    p,
    label {
      font-size: 14px;
      padding: 0 0.2rem;
    }
    .BillNo {
      font-size: 16px;
      padding:10px 0.2rem;
    }
    .displayflex {
      label {
        color: #888;
      }
      p {
        color: #888;
        &:last-child {
          text-align: right;
        }
      }
    }
  }
.mb30{
  margin:0 0 15px;
}

///////////////////////////////
.prog-step {
  border-left: 1px solid #23a5a5;
}

.prog-step-dl:first-child:after {
  width:14px;
  height:14px;
  left: -24.5px;
}
.prog-step-dl:after {
  width:10px;
  height:10px;
  left: -22px;
}
.lltab {
  padding-bottom: 10px;
}
.card {
  background: #ffffff;
  border-radius: 4px;
  padding:15px;
  .title {
    display: block;
    color:#23a5a5;
    padding-bottom: .2rem;
    font-weight: 600;
    border-bottom: 1px solid #23a5a5;
    margin-bottom: .15rem;
  }
  .displayflex {
    line-height: .5rem;
  }
  .goodscell{
    p {
      line-height: .5rem;
      &:last-of-type {
        padding-bottom: .2rem;
      }
    }
    border-bottom: 1px solid #f5f5f5;
    margin-bottom: .2rem;
    &:last-of-type {
        border-bottom: none;
        margin-bottom: 0;
    }
  }
}
.mb15 {
  margin-bottom:0.2rem;
}
.noticer {
  height:.7rem;
  line-height: .7rem;
  background: rgba(255, 255, 131, 1);
  position: fixed;
  bottom:0;
  left:0;
  width:100%;
  color:#a50000;
  padding:0 .2rem;
  font-size:13px;
  box-sizing: border-box;
  text-align: center;
  .llse {
    float: right;
    font-size: 13px !important;
  }
  label {
    text-decoration: underline;
  }
}
.proressCard {
  position: absolute;
  border-top: 1px solid rgba(0,0,0,0.15);
  background: #fff;
  margin-top:-10px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  top: calc(~"80vh + 43px");
  transition: top ease .3s;
  height: calc(~"20vh - 44px");
  overflow: hidden;
  width:100%;
  &.hasContent {
    padding-top: .2rem;
  }
  &.viewing {
    height: calc(~"80vh - 53px - .3rem");
    top: 30vh;
  }
}
#allmap {
  z-index: -1 !important;
}
.prog-step-dl {
  &.null {
    text-align: center;
    height: calc(~"20vh - .2rem");
  }
}
.slidetip {
  position:absolute;
  width:100%;
  margin-top:-.4rem;
  height:.4rem;
  z-index:1;
  color:#23a5a5;
  text-align: center;
}
.contain {
  position: relative;
}

.llse-adown,
.llse-aup  {
  display: inline-block;
  transition: all ease .3s;
  &.rotate180 {
    transform: rotate(180deg);
  }
}

.expandCard {
  box-sizing: border-box;
  position:absolute;
  z-index: 2;
  background: rgba(35, 165, 165, 0.85);
  top: calc(~".1rem + 53px");
  left: .1rem;
  right: .1rem;
  padding: .15rem .25rem .15rem .25rem;
  width: calc(~"100vw - .1rem - .1rem");
  border-radius: 5px;
  color:#fff;
  .llse-zhi {
    font-size:18px !important;
  }
  .topinfo {
    span {
      padding-right: .3rem;
      &:last-of-type {
        padding-right: 0;
      }
    }
    &.col {
      height: .5rem;
      line-height: .5rem;
    }
  }
  .whiteCard {
    color:#23a5a5;
    background: #ffffff;
    border-radius: 4px;
    padding: 13px;
    margin-bottom: 10px;
    p {
      line-height: .45rem;
      &:first-of-type {
        font-weight: 600;
      }
    }
    &:last-of-type {
      margin-bottom: 5px;
    }
  }
}
.progressWrap {
  position: relative;
  .fixed {
    padding-left:15px;
    margin-top: .4rem;
    &.show {
      overflow-y: scroll;
      overflow-x:visible;
      height: calc(~"80vh - 1.8rem");
    }
  }
}
.scroller-wrap {
  top:0;
}

.nodata {
  margin-top:0;
}
.noContent {
  padding-top: .2rem;
  top: calc(~"89vh + 43px");
}
</style>

<template>
  <div class="contain">
    <app-header></app-header>

    <div class="lltab ft14">
      <tab bar-active-color="#77babd" defaultColor="#333333" active-color="#77babd" :line-width="3" :custom-bar-width="'15%'">
        <tab-item selected @on-item-click="tabNo = 1">单据详情</tab-item>
        <tab-item @on-item-click="tabNo = 2" v-bind:disabled="data.PoMain === null">配送详情</tab-item>
      </tab>
    </div>

    <div class="prog-step-wrap" v-show="tabNo === 1">
      <div class="card mb15">
        <span class="title">单据信息</span>
        <div class="displayflex">
          <label>业务单号：</label>
          <p class="flex1">{{data.BbMain.BBillNo}}</p>
        </div>
        <div class="displayflex">
          <label>业务员：</label>
          <p class="flex1">{{data.BbMain.ShowBuyerName}}</p>
        </div>
        <div class="displayflex">
          <label>订单日期：</label>
          <p class="flex1">{{data.BbMain.InputDate | timeCX('yyyy-MM-dd')}}</p>
        </div>
        <div class="displayflex">
          <label>收货单位：</label>
          <p class="flex1">{{data.BbMain.SaleCorpName}}</p>
        </div>
        <div class="displayflex">
          <label>备注：</label>
          <p class="flex1">{{data.BbMain.Memo || '-'}}</p>
        </div>
      </div>
      <div class="card">
        <span class="title">货物信息</span>
        <div v-for="(item, index) in data.BbDetailList" class="goodscell">
          <p>品名：{{item.GoodsName}}</p>
          <p>规格：{{item.GoodsSpec}}</p>
          <p>批号：{{item.Lot}}</p>
          <p>件数：{{item.Pcks}}件</p>
        </div>
      </div>
    </div>

    <div class="prog-step-wrap nopad" v-show="tabNo === 2">
      <div id="allmap" v-bind:style="{height:semiTraceData.length > 0?'80vh':'89vh'}"></div>
      <div class="proressCard" v-if="showProgress" v-bind:class="{'viewing': viewProgress == true, 'hasContent': semiTraceData.length > 0, 'noContent': semiTraceData.length == 0}">
        <div class="progressWrap">
          <div class="slidetip" v-bind:class="semiTraceData.length == 0?'nodata':''" v-on:click="viewProgress = !viewProgress">
            <label v-if="semiTraceData.length > 0">查看追溯详情 <i class="llse llse-aup" v-bind:class="viewProgress?'rotate180':''"></i></label>
            <label v-else>暂无追溯信息</label>
          </div>
          <scroller lock-x scrollbar-y use-pullup v-bind:height="scrollerH" class='scroller-wrap' v-if="semiTraceData.length>0" :pullup-config="scrollerCfg" ref="Scroller" style="margin-top:.4rem; padding-left:.2rem">
            <div>
              <div class="prog-step" v-if="semiTraceData.length>0">
                <dl class="prog-step-dl" v-for="item in semiTraceData">
                  <dd class="ExcuteState">{{item.content}}</dd>
                  <dt class="ExcuteState">{{item.title}}</dt>
                  <dd class="ExcuteDate">{{item.time}}</dd>
                </dl>
              </div>
            </div>
          </scroller>
        </div>
      </div>
      <div v-else class="proressCard">
        <dl class="prog-step-dl null">
          暂无进度信息
        </dl>
      </div>
    </div>

    <div class="noticer" v-if="showNotice">
      微信关注“<label id="copyField" v-on:click="copy">恋链</label>”公众号，可查看全部订单追溯状态！
      <i class="llse llse-del" v-on:click="removeNotice"></i>
    </div>


    <div class="expandCard" v-if="tabNo == 2">
      <div class="topinfo col">
        <span>{{data.PoMain.DepartureCity | city}}/{{data.PoMain.DepartureDistrict | district}}</span>
        <span><i class="llse llse-zhi"></i></span>
        <span>{{data.PoMain.ArrivalCity | city}}/{{data.PoMain.ArrivalDistrict | district}}</span>
      </div>
      <div class="topinfo col">
        业务单号：{{data.BbMain.BBillNo}}
      </div>
      <div class="topinfo col">
        起运时间：{{data.PoMain.DepartureDate | timeCX('yyyy-MM-dd')}}
      </div>

      <tsd>
        <div v-show="showExtra" class="PackageItems">
          <slot>
            <div class="whiteCard">
              <p>发货方信息</p>
              <p>联系人：{{data.PoMain.PickContacts}}</p>
              <p>联系电话：{{data.PoMain.PickContactsTel}}</p>
              <p>要求提货日期：{{data.PoMain.CollectionTime | timeCX('yyyy-MM-dd')}}</p>
              <p>要求起运日期：{{data.PoMain.DepartureDate | timeCX('yyyy-MM-dd')}}</p>
              <p>所在地：{{data.PoMain.DepartureVenue}}</p>
              <p>详细地址：{{data.PoMain.DepartureAddress}}</p>
            </div>
            <div class="whiteCard">
              <p>收货方信息</p>
              <p>联系人：{{data.PoMain.SendContacts}}</p>
              <p>联系电话：{{data.PoMain.SendContactsTel}}</p>
              <p>到货期限：{{data.PoMain.TimeLimit >0?`${data.PoMain.TimeLimit}天`:'-'}}</p>
              <p>到货限定日期：{{data.PoMain.LastArrivalArrivedDate | timeCX('yyyy-MM-dd')}}</p>
              <p>所在地：{{data.PoMain.ArrivalVenue}}</p>
              <p>详细地址：{{data.PoMain.ArrivalAddress}}</p>
            </div>
          </slot>
        </div> 
      </tsd>

      <div class="topinfo col txt-center ft11" v-on:click="showExtra = !showExtra">
        展开收发双方信息 <i class="llse llse-adown ft14" v-bind:class="showExtra?'rotate180':''"></i>
      </div>
    </div>

  </div>
</template>

<script>
import appHeader from "@/components/core/header/app_header.vue";
import tsd from "../../../tools/vue-transition-div.js";
export default {
  components: {
    appHeader,
    tsd
  },
  name: "newrogresss",
  data() {
    return {
      tabNo: 1,
      data: {
        PoMain: {},
        BbMain: {},
        BbDetailList: []
      },
      time: "",
      progressNode: [],
      PoMain: {},
      Vehicle: {},
      filter: this.$options.filters,
      kfNumber: "400-056-1858",
      scrollerCfg: {
        content: '',
        downContent: '',
        height: 0,
        loadingContent: '',
        upContent: '',
      },
      scrollerH: '',
      totalRecords: 0,
      PageSize: 1,
      map: null,
      points: [],
      addressStart: "",
      addressEnd: "",
      semiTraceData: [],
      showProgress:false,
      showNotice:false,
      showExtra: false,
      viewProgress: false,
    };
  },
  watch: {
    tabNo(n, o) {
      if (n == 2 && this.PoMain && this.map == null) {
        this.$nextTick(() => {
          this.LoadMap();
          this.getSliderHeight();
          if(this.semiTraceData.length > 0) {
            this.ScrollControl();
          }
        });
      }
    }
  },
  created() {
    if(this.$route.query.FromDingDing == 'Y') {
      this.showNotice = true;
    }
    this.getdata();
  },
  computed: {
    userinfo() {
      return localStorage.getItem("userinfo") === null
        ? null
        : JSON.parse(localStorage.getItem("userinfo"));
    },
    Guid() {
      return this.$route.query.Guid ? this.$route.query.Guid : null;
    },
    MainPoGuid() {
      return this.$route.query.MainPoGuid ? this.$route.query.MainPoGuid : null;
    },
    BBillGuid() {
      return this.$route.query.BBillGuid ? this.$route.query.BBillGuid : null;
    },
    Qty() {
      let Qty = 0;
      this.data.BbDetailList.forEach(x => {
        Qty += x.Qty;
      });
      return Qty;
    }
  },
  methods: {
    getdata() {
      var slef =this;
      var query = {
        Guid: this.Guid,
        MainPoGuid: this.MainPoGuid,
        BBillGuid: this.BBillGuid,
        // TenantGuid: this.userinfo.TenantGuid,
        //CorpGuid: this.userinfo.CorpGuid
      };
      this.Ajax.post("LogisticsOrderTracking", query).then(resp => {
        if (resp.IsSuccess) {
          this.data = resp.Data;
          if (this.data.PoMain) this.PoMain = this.data.PoMain;
          if (this.data.Vehicle) this.Vehicle = this.data.Vehicle;

          if (this.PoMain) {
            this.addressStart = `${this.filter.province(
              this.PoMain.DepartureProvince
            )}${this.filter.city(
              this.PoMain.DepartureCity
            )}${this.filter.district(this.PoMain.DepartureDistrict)}${
              this.PoMain.DepartureAddress
            }`;
            this.addressEnd = `${this.filter.province(
              this.PoMain.ArrivalProvince
            )}${this.filter.city(
              this.PoMain.ArrivalCity
            )}${this.filter.district(this.PoMain.ArrivalDistrict)}${
              this.PoMain.ArrivalAddress
            }`;
          }

          if (this.data.TracingList) {
            this.progressNode = this.progressNode.concat(this.data.TracingList);
            this.progressNode.forEach(item => {
              var stateinfo = `${this.filter.PoState(item.ExcuteState)}`;
              var content = stateinfo;
              if (item.ExcuteState == "41") {
                content =
                  "【" + this.data.PoMain.DeliverName + "】" + stateinfo;
              }
              if (item.ExcuteState == "44") {
                content =
                  "【" + this.data.PoMain.DeliverName + "】" + stateinfo;
              }
              if (item.ExcuteState == "51") {
                content =
                  stateinfo +
                  ", 司机：" +
                  this.data.Vehicle.Driver1Name +
                  "，电话：" +
                  this.data.Vehicle.Driver1Tel;
              }
              if (item.ExcuteState == "52") {
                content =
                  "货物已装车，提货件数：" +
                  this.data.BbMain.Pkgs +
                  "件，发往【" +
                  this.data.BbMain.SaleCorpName +
                  "】";
              }
              if (item.ExcuteState == "56") {
                content =
                  "货物已由" +
                  "【" +
                  this.data.Vehicle.Driver1Name +
                  "】交接确认，交接件数：" +
                  this.data.BbMain.Pkgs +
                  "件，请准备收货。";
              }
              if (item.ExcuteState == "81") {
                content =
                  "货物已完成配送 | 签收人：" +
                  this.data.PoMain.Receiver +
                  "，签收件数：" +
                  this.data.BbMain.Pkgs +
                  "件。";
              }
              var itemdata = {
                content: content,
                //title: stateinfo,
                time: `${this.filter.timeCX(item.CreateTime)}`
              };
              this.semiTraceData.push(itemdata);
              //console.log(item.ExcuteState);
            });
            this.showProgress = true;
          }

          if (this.data.GpsList && this.data.GpsList.length > 0) {
            this.data.GpsList.forEach(x => {
              let item = JSON.parse(x.DrivePositionGIS);
              this.points.push(new BMap.Point(item.lng, item.lat));
            });
          } else {
            var myGeo = new BMap.Geocoder();
            //console.log(this.addressStart);
            myGeo.getPoint(
              this.addressStart,
              function(point) {
                console.log(point);
                slef.points.push(new BMap.Point(point.lng,point.lat));
              },
              this.addressStart
            );
          }
          this.totalRecords = this.semiTraceData.length;
        } else {
          this.Toast({
            message: resp.ErrorMessage || "列表为空，请稍后刷新"
          });
        }
      });
    },
    LoadMap() {
      let self = this,
        mapStyle = {
          styleJson: [
            {
              featureType: "water",
              elementType: "all",
              stylers: {
                color: "#62b9c0"
              }
            },
            {
              featureType: "land",
              elementType: "all",
              stylers: {
                color: "#f3f3f3"
              }
            },
            {
              featureType: "railway",
              elementType: "all",
              stylers: {
                visibility: "off"
              }
            },
            {
              featureType: "highway",
              elementType: "all",
              stylers: {
                color: "#dae9e6"
              }
            },
            {
              featureType: "highway",
              elementType: "labels",
              stylers: {
                visibility: "off"
              }
            },
            {
              featureType: "arterial",
              elementType: "geometry",
              stylers: {
                color: "#fefefe"
              }
            },
            {
              featureType: "arterial",
              elementType: "geometry.fill",
              stylers: {
                color: "#fefefe"
              }
            },
            {
              featureType: "poi",
              elementType: "all",
              stylers: {
                visibility: "on"
              }
            },
            {
              featureType: "green",
              elementType: "all",
              stylers: {
                visibility: "off"
              }
            },
            {
              featureType: "subway",
              elementType: "all",
              stylers: {
                visibility: "off"
              }
            },
            {
              featureType: "manmade",
              elementType: "all",
              stylers: {
                color: "#d1d1d1"
              }
            },
            {
              featureType: "local",
              elementType: "all",
              stylers: {
                color: "#d1d1d1"
              }
            },
            {
              featureType: "arterial",
              elementType: "labels",
              stylers: {
                visibility: "off"
              }
            },
            {
              featureType: "boundary",
              elementType: "all",
              stylers: {
                color: "#8eaeb1"
              }
            },
            {
              featureType: "building",
              elementType: "all",
              stylers: {
                color: "#d1d1d1"
              }
            },
            {
              featureType: "label",
              elementType: "labels.text.fill",
              stylers: {
                color: "#666666"
              }
            },
            {
              featureType: "district",
              elementType: "labels.text.fill",
              stylers: {
                color: "#444"
              }
            },
            {
              featureType: "district",
              elementType: "labels.text.stroke",
              stylers: {
                color: "#EFEFEF"
              }
            }
          ]
        };

      let top_right_navigation = new BMap.NavigationControl({
          anchor: BMAP_ANCHOR_TOP_RIGHT,
          type: BMAP_NAVIGATION_CONTROL_SMALL
        }), //右上角，仅包含平移和缩放按钮
        GeoCoder = new BMap.Geocoder();

      this.map = new BMap.Map("allmap");
      this.map.setMapStyle(mapStyle);
      // this.map.addControl(top_right_navigation);
      this.map.enableScrollWheelZoom();

      //设定起止点
      let fc = this.$options.filters["city"],
        myGeo = new BMap.Geocoder(),
        AddressPair = [this.addressStart, this.addressEnd],
        IcoPair = ["/Static/images/start.png", "/Static/images/end.png"],
        AddressTxtPair = [
          fc(this.PoMain.DepartureCity),
          fc(this.PoMain.ArrivalCity)
        ],
        PointPair = [];

      runAsync().then(x => {
        if (x === true) {
          if (this.addressstart !== "" && this.addressend !== "") {
            this.setZoom(PointPair);
            this.setRoute(PointPair);
          }
          let polyline = drawRoute();
          this.map.addOverlay(self.car);
          this.map.addOverlay(polyline); //增加折线
        } else {
          this.Toast({
            message: "起始地址没有解析到结果，请刷新重试"
          });
        }
      });

      function drawRoute() {
        let driving = new BMap.DrivingRoute(self.map),
          polylinelist = [];

        self.points.forEach(element => {
          polylinelist.push(new BMap.Point(element.lng, element.lat));
        });
        let polyline = new BMap.Polyline(polylinelist, {
          strokeColor: "black",
          strokeWeight: 5,
          strokeOpacity: 1
        });

        self.car = new BMap.Marker(self.points[self.points.length - 1], {
          icon: new BMap.Icon("/Static/images/car.png", new BMap.Size(52, 32), {
            anchor: new BMap.Size(27, 13)
          })
        });

        return polyline;
      }

      function runAsync() {
        let promise = new Promise((resolve, reject) => {
          AddressPair.forEach((x, i) => {
            myGeo.getPoint(
              x,
              function(point) {
                if (point) {
                  PointPair.push(point);
                  let Mark = new BMap.Marker(point, {
                    icon: new BMap.Icon(IcoPair[i], new BMap.Size(36, 36), {
                      anchor: new BMap.Size(18, 36)
                    })
                  });
                  self.map.addOverlay(Mark);
                  if (PointPair.length === AddressPair.length) {
                    resolve(true);
                  }
                } else {
                  reject(false);
                }
              },
              AddressTxtPair[i]
            );
          });
        });
        return promise;
      }
    },
    // 根据点的数组自动调整缩放级别
    setZoom(bPoints) {
      let view = this.map.getViewport(eval(bPoints)),
        mapZoom = view.zoom,
        centerPoint = view.center;
      this.map.centerAndZoom(centerPoint, mapZoom);
    },
    setRoute(bPoints) {
      let driving = new BMap.DrivingRoute(this.map, {
        renderOptions: {
          map: this.map,
          autoViewport: true
        },
        onPolylinesSet: routes => {
          let searchRoute = routes[0].getPolyline(); //导航路线
          searchRoute.setStrokeColor("#62b9c0");
          searchRoute.setStrokeOpacity(1);
          this.map.addOverlay(searchRoute);
        },
        onMarkersSet: routes => {
          this.map.removeOverlay(routes[0].marker); //删除起点
          this.map.removeOverlay(routes[1].marker); //删除终点
        }
      });
      driving.search(bPoints[0], bPoints[1]);
    },

    //随机生成时间
    getRandomTime() {
      let arr = new Array(),
        d = new Date(this.PoMain.BillDate),
        Y = d.getFullYear(),
        M = d.getMonth() + 1 < 10 ? `0${d.getMonth() + 1}` : d.getMonth() + 1,
        D = d.getDate() < 10 ? `0${d.getDate()}` : d.getDate(),
        h = d.getHours() < 10 ? `0${d.getHours()}` : d.getHours(),
        m = d.getMinutes() < 10 ? `0${d.getHours()}` : d.getHours(),
        s = d.getSeconds() < 10 ? `0${d.getHours()}` : d.getHours();
      for (var i = 0; i < this.semiTraceData.length; i++) {
        arr.push(
          `${Y}-${M}-${D} ${grn(20, parseInt(h))}:${grn(60, parseInt(m))}:${grn(
            60,
            parseInt(s)
          )}`
        );
      }
      return arr;

      function grn(min, max) {
        let s = max - min,
          n = Math.floor(Math.random() * s + min);
        return n < 0 ? `0${n}` : n;
      }
    },

    //removeNotice
    removeNotice(){
      this.showNotice = false;
    },

    ScrollControl(){
      if(this.totalRecords <= this.PageSize){
        this.scrollerCfg.content = '';
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.disablePullup();
            this.noMore = true;
          });
        });
      }

      if(this.semiTraceData.length > 0 && this.$refs.Scroller){
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.donePullup();
          });
        });
      }

      if (this.totalRecords == this.semiTraceData.length) {
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.disablePullup();
            this.noMore = true;
          });
        });
      }
    },
    getSliderHeight() {
      var pageH = window.screen.height;
      var minusH = (pageH/100) * 20  + 53 + 60;
      this.scrollerH =  (0 - minusH).toString();
    },

    //复制文本
    copy(){
      let _that = this,
          txt = null;
      if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
        window.getSelection().removeAllRanges();
        let text = document.getElementById("copyField"),
            range = document.createRange();
        range.selectNode(text);
        window.getSelection().addRange(range);
        let successful = document.execCommand('copy');
        window.getSelection().removeAllRanges();
        if(successful) txt = text;
      } else {
        let text = document.getElementById("copyField").innerText;
        const textarea = document.createElement("textarea") ;
        textarea.style.position = 'fixed' ;
        textarea.style.top = 0 ;
        textarea.style.left = 0 ;
        textarea.style.border = 'none' ;
        textarea.style.outline = 'none' ;
        textarea.style.resize = 'none';
        textarea.style.background = 'transparent' ;
        textarea.style.color = 'transparent';
        textarea.value = text ;
        document.body.appendChild(textarea);
        textarea.select();
        try { 
          const msg = document.execCommand('copy') ? 'successful' : 'unsuccessful' ;
          if(msg) txt = text;
        } 
        catch (err) {
          this.Toast({
            message: '复制失败，不受支持的操作系统',
          });
        }
        document.body.removeChild(textarea)
      }
      if(txt) {
        this.MessageBox.confirm('公众号名称已复制，是否前往微信？<br>在微信通讯录内粘帖并搜索即可').then(() => {
          location.href = "weixin://";
        })
      }
    },
  }
};
</script>